<script setup lang="ts"></script>

<template>
    <BNavbar toggleable="lg" class="navbar">
        <BNavbarToggle target="nav-collapse" />
        <BNavbarBrand href="#" class="m-0">
            <h5 class="title">奥伦科技</h5>
        </BNavbarBrand>
        <BCollapse id="nav-collapse" is-nav>
            <BNavbarNav>
                <BNavItem class="nav-item" href="#">联系我们</BNavItem>
                <BNavItem class="nav-item" href="#" disabled>我们的团队</BNavItem>
                <BNavItem class="nav-item" href="#" disabled>关于我们</BNavItem>
                <BNavItem class="nav-item" href="#" disabled>关于我们</BNavItem>
                <BNavItem class="nav-item" href="#" disabled>帮助与下载</BNavItem>
                <BNavItem class="nav-item" href="#" disabled>隐私政策</BNavItem>
                <BNavItem class="nav-item nav-item-btn" href="#" disabled>
                    <BButton class="buy-btn" pill type="submit" variant="outline-success">Buy Now</BButton>
                </BNavItem>
            </BNavbarNav>
        </BCollapse>
    </BNavbar>
    <header class="header">
        <h1>Best Hosting Platform</h1>
        <p class="sub-label">奥伦科技</p>
    </header>
</template>

<style scoped lang="scss">
.navbar {
    background-color: #f8f9fa;

    :deep(.navbar-collapse) {
        justify-content: flex-end;
    }

    :deep(.navbar-brand) {
        flex: 1;
        text-align: center;
    }

    .buy-btn {
        border-color: #212529;
        font-size: 15px;
        color: #212529;
        padding: 8px 20px !important;
        height: fit-content;
        margin: 0;
    }
}

.title {
    font-weight: 800;
    font-size: 28px;
    color: #212529;
}

.nav-item {

    :deep(.navbar-nav) {
        align-items: center;
    }

    :deep(.nav-link) {
        padding: 8px 20px !important;
        color: #212529;
        font-weight: 700;
        font-size: 16px;
        white-space: nowrap;
    }

    &.nav-item-btn {
        margin-left: 20px;
        width: 100%;
        text-align: center;

        :deep(.nav-link) {
            padding: 0 !important;
        }

    }
}

.header {
    background-color: #f8f9fa;
    padding-top: 50px;
    padding-bottom: 40px;
    text-align: center;
    border-color: #212529;

    h1 {
        font-weight: 700;
        font-size: 40px;
    }

    .sub-label {
        font-size: 12px;
        margin-top: 20px;
        font-weight: 500;
    }


}
</style>
